<template>
      <div class="logistics-info">
      <h2>商品相关信息</h2>
      <slot name="Goods" :goodInfo="orderInfo.goodInfo" >这是商品</slot>
      <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <!-- <div class="logistics-status blue">{{orderInfo.logisticsStatus===3?'未签收':orderInfo.logisticsStatus===2?'已签收':orderInfo.logisticsStatus===1?'已发货':orderInfo.logisticsStatus?'未发货':'无'}}</div> -->
          <!-- 更好的方法，加一个查询表 -->
           <div class="logistics-status" :class="goodsClss" >{{goodsStutes}}</div>
          <div class="logistics-company">{{orderInfo.logisticsCompany}}</div>
          <div class="logistics-no">{{orderInfo.logisticsNo}}</div>
        </div>
      </div>
      <ul class="logistics-info-list">
        <li v-for="item in orderInfo.logisticsInfo" :key="item.time">
          <div class="logistics-info-list-time">{{item.time}}</div>
          <div class="logistics-info-list-content">{{item.content}}</div>
        </li>
      </ul>
      <button  v-inquire="orderInfo.role">查看物流详情</button>
    </div>
</template>

<script>
import {stutesArr} from '@/emits/GoodsStutes'
export default {
  name: 'MyGoods',
  props: {
    orderInfo:{
      type:Object,
      required:true
    },
  },
  data(){
    return{
      flag:true,
      stutesArr:stutesArr
    }
  },
  computed:{
   goodsStutes(){
    return this.stutesArr[this.orderInfo.logisticsStatus][0]
   },
   goodsClss(){
    return this.stutesArr[this.orderInfo.logisticsStatus][1]
   }
  },
  directives:{
    inquire:{
      inserted(el,{value}){
      const res= ['admin','zhangsan','lisi'].includes(value)
      el.disabled=!res
      }
    }
  }

}
</script>

<style scoped lang="less">
.red{
  color: red;
}
.blue{
  color: blue;
}
.green{
  color: green;
}
.yellow{
  color: yellow;
}
</style>
